<!--
 *Author：jxx
 *Contact：283591387@qq.com
 *业务请在@/extension/students/students/Nyz_Students.jsx或Nyz_Students.vue文件编写
 *新版本支持vue或【表.jsx]文件编写业务,文档见:https://v3.volcore.xyz/docs/view-grid、https://v3.volcore.xyz/docs/web
 -->
<template>
    <view-grid ref="grid" :columns="columns" :detail="detail" :details="details" :editFormFields="editFormFields"
        :editFormOptions="editFormOptions" :searchFormFields="searchFormFields" :searchFormOptions="searchFormOptions"
        :table="table" :extend="extend" :onInit="onInit" :onInited="onInited" :searchBefore="searchBefore"
        :searchAfter="searchAfter" :addBefore="addBefore" :updateBefore="updateBefore" :rowClick="rowClick"
        :modelOpenBefore="modelOpenBefore" :modelOpenAfter="modelOpenAfter">
        <!-- 自定义组件数据槽扩展，更多数据槽slot见文档 -->
        <template #gridHeader>
        </template>
    </view-grid>
     <!-- 隐藏的打印内容容器 -->
     <div id="printContent" style="display: none;">
      <div v-for="student in rows" :key="student.StudentID" class="student-card">
        <h2>学生信息</h2>
        <div class="info-row">
          <span class="label">学号:</span>
          <div class="qrcode-container">
            <img :src="getQrCodeUrl(student.StudentNo)" alt="学号二维码">
          </div>
        </div>
        <div class="info-row">
          <span class="label">姓名:</span>
          <span>{{ student.Name }}</span>
        </div>
        <div class="info-row">
          <span class="label">性别:</span>
          <span>{{ student.Gender }}</span>
        </div>
        <div class="info-row">
          <span class="label">出生日期:</span>
          <span>{{ formatDate(student.BirthDate) }}</span>
        </div>
        <div class="info-row">
          <span class="label">身份证号:</span>
          <span>{{ student.IDCardNo }}</span>
        </div>
        <div class="info-row">
          <span class="label">入学日期:</span>
          <span>{{ formatDateTime(student.EnrollmentDate) }}</span>
        </div>
        <div class="info-row">
          <span class="label">联系电话:</span>
          <span>{{ student.ContactPhone }}</span>
        </div>
        <div class="info-row">
          <span class="label">电子邮箱:</span>
          <span>{{ student.Email }}</span>
        </div>
        <div class="info-row">
          <span class="label">家庭地址:</span>
          <span>{{ student.HomeAddress }}</span>
        </div>
        <div class="info-row">
          <span class="label">紧急联系人:</span>
          <span>{{ student.EmergencyContact }}</span>
        </div>
        <div class="info-row">
          <span class="label">状态:</span>
          <span>{{ getStatusText(student.Status) }}</span>
        </div>
        <div class="photo-container" v-if="student.PhotoPath">
          <img :src="student.PhotoPath" alt="学生照片" class="student-photo">
        </div>
        <div class="page-break"></div>
      </div>
    </div>
</template>
<script setup lang="jsx">
import extend from "@/extension/students/students/Nyz_Students.jsx";
import viewOptions from './Nyz_Students/options.js'
import { ref, reactive, getCurrentInstance, watch, onMounted } from "vue";
import printJS from 'print-js';
import QRCode from 'qrcode';

const grid = ref(null);
const { proxy } = getCurrentInstance()




//http请求，proxy.http.post/get
const { table, editFormFields, editFormOptions, searchFormFields, searchFormOptions, columns, detail, details } = reactive(viewOptions())

let gridRef;//对应[表.jsx]文件中this.使用方式一样
//生成对象属性初始化
const onInit = async ($vm) => {
    gridRef = $vm;
    //与jsx中的this.xx使用一样，只需将this.xx改为gridRef.xx
    //更多属性见：https://v3.volcore.xyz/docs/view-grid
}
//生成对象属性初始化后,操作明细表配置用到
const onInited = async () => {
}
const searchBefore = async (param) => {
    //界面查询前,可以给param.wheres添加查询参数
    //返回false，则不会执行查询
    return true;
}
const searchAfter = async (rows, result) => {
    return true;
}
const addBefore = async (formData) => {
    //新建保存前formData为对象，包括明细表，可以给给表单设置值，自己输出看formData的值
    return true;
}
const updateBefore = async (formData) => {
    //编辑保存前formData为对象，包括明细表、删除行的Id
    return true;
}
const rowClick = ({ row, column, event }) => {
    //查询界面点击行事件
    // grid.value.toggleRowSelection(row); //单击行时选中当前行;
}
const modelOpenBefore = async (row) => {//弹出框打开后方法
    return true;//返回false，不会打开弹出框
}
const modelOpenAfter = (row) => {
    //弹出框打开后方法,设置表单默认值,按钮操作等
    gridRef.getFormOption("StudentNo").required=true;//false
}
//监听表单输入，做实时计算
//watch(() => editFormFields.字段,(newValue, oldValue) => {	})
//对外暴露数据
defineExpose({})
</script>
<style lang="less" scoped></style>
